<template>
    <van-icon
        :name="ICON_NAME || props.name"
        :size="size"
        class="flex-center"
        style="margin: 0 0.1rem" />
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    // Props
    const props = withDefaults(
        defineProps<{
            name?: string; // 图标名称
            size?: string | number; // 大小
        }>(),
        {
            name: 'gold', // 图标名称
            size: 'inherit', // 大小
        }
    );

    const ICON_NAME = ref('');
    if (props.name.toUpperCase() === 'GOLD') {
        import('@img/logo.png').then((path) => {
            ICON_NAME.value = path['default'];
        });
    }
    if (props.name.toUpperCase() === 'GOLDS') {
        import('@img/icon-many-gold.png').then((path) => {
            ICON_NAME.value = path['default'];
        });
    }
</script>

<style lang="scss" scoped></style>
